真正的 Daily UI，照慣例須連續 100 天，每天設計一 UI 介面，但那偏向自我學習，而 IT 鐵人賽則偏向教學（ 當然也有人只是想完賽，所以堅持每天寫，文章具體對自己或他人是否有學習價值還是個問題 ），再來，UI 若很複雜，要馬只能簡化，要馬只能挑簡單的實作，而且畢竟涉及開發，相當耗時（ RWD、串 API、網頁相容性測試 . . . 這誰搞得完？ ）
筆者已使用 Vuetify 相當長的時間，故本系列文除提供由淺至深的實作範例外，最主要希望能讓讀者了解只有在掌握 Functional Component Composition Thinking（ 以後簡稱 FCCT ） 這個概念，才能幫助你正確、並且深度使用 Vuetify 這類的現代 UI 框架
至於為何想開啟此主題，簡單來說，在瀏覽過許多網路上的 Vuetify 教學後，發現多數只不過是對官方文件 "換句話說"，教導 Vuetify 的安裝與基礎使用方式，但那卻無法讓你真正了解到此框架強大在哪，造成可能多數使用時，也不過是引入 UI 組件然後使用罷了，這樣跟隨便在網路上挑一個 plugin 來用有什麼兩樣呢？
UI 框架存在目的是什麼，Vuetify 為何要實踐 Material Design（ 以後簡稱 MD ）、什麼是 FCCT... 了解這些林林總總的細節，我想是必要的過程（ 但寫作時間有限，我盡量吧ＸＤ ）。當然概念很簡單，之後也不過就只是大量使用 Vuetify API 罷了，但打下良好基礎確實有助後續發展。
若使用者只會單純的引入 UI 組件做使用，我想這並沒有任何技術難度才是，而且因為 Vuetify 官方文件足夠完善，這部分的使用曲線難度降得很低。關鍵是需要了解 UI 框架的一些相關核心概念，這了解這些概念對初階、進階使用者皆適合，而且必要。至於 API 如何使用... 熟能生巧囉。
簡單來講，整個教學流程就是先講核心概念，之後就是實作 "基本符合" MD 規範的 UI，從簡單到複雜，並於開發過程中帶一些觀念、技巧。所以 UI 分兩類，簡單和複雜，對於前者，我直接從 Daily UI 的發起人之作品集中隨機挑選，複雜的部分就隨機挑選 Google 的產品並仿製，維因後者複雜度太高而時間有限，不可能做到完全相同，固會以以下原則予以簡化：
BTW，也是因這次機會，發現一個有趣現象：Google 有些產品在某些情況下（ e.g. 在某斷點 ）也是跑版，或功能有問題的（ e.g. 側邊欄開啟後再也無法關閉 ），還有某些在 Chrome 上瘋狂 Lag，但 Firefox 上卻沒事的案例。Google 也不是每個產品都符合 MD，已套上 MD 的產品不見得其中每個元件都遵循相同設計原則（ 我還一直以為它們家做的東西都是 perfect ）
想掌握 Vueitfy，它們的官網就是最佳學習教材（ 請打開官網 ），所以在列表教學大綱前（ 你若能搞懂前七天我教的東西，尤其是 FCCT，只要你英文有一定程度，看官網就足夠學習，真心不騙 ），先讓你快速了解會教/帶到什麼：主要就是針對 Styles & animations 和 UI Components（ 目前 2.0.19 版中，計有 68 個元件，本系列文會教 36 個，我想應該夠多了？關鍵是要盡量掌握那些常用的元件，尤其是偏底層、抽象的元件。具體會教/帶到哪些元件，見以下 ）
Application, Aspect ratios, Avatars, Buttons, Buttons: Floating action buttons, Bars(2), Cards, Carousels, Chips, Dialogs, Dividers, Footer, Form inputs & controls > ( File inputs, Selects, Selection controls, Slider, Textareas, Text fields ), Grids, Groups > ( Chip groups, Slide groups, Button groups, List item groups ), Hover, Icons, Images, Lists, Menus, Navigation drawers, Overlays, Progress(2), Sheets, Subheaders, Tabs
非常感謝大大 對我這CSS不熟
剛入門Vue+ Vuetify的人來說
這種有實例 + 介紹的文章是最有幫助的 > <
真的太感謝了
iThome鐵人賽
看影片追技術